$(function(){
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    $.ajax({
        type:"post",
        url:"/evaluate/priceTrend",
        data:{"id":getQueryString("id"),"areaId":getQueryString("areaId")},
        success: function (data) {
            console.log(data)
            var cityList=data.cityList,
                districtList = data.districtList,
                districtNum = [],
                rateList = data.rateList[0],
                trendNet = rateList.trendNetlist,
                trendPriceCommunity = rateList.trendPriceCommunity,
                cityName = rateList.cityName,
                district = rateList.districtName,
                trendNetlist1 = [],
                trendPriceCommunity2 = [],
                cityNum = [],
                cityNum2 = [],
                cityNum3 = [],
                community = data.communityList[0].communityname,
                cityDate = [];
            var trendNetlist = trendNet.split(";");
            trendNetlist1 = trendNetlist[0].split(",");
            cityNum3 = trendNetlist[1].split(",");
            var trendPriceCommunity1 = trendPriceCommunity.split(";");
            trendPriceCommunity2 = trendPriceCommunity1[0].split(",");
            var arr2 = new Array(trendPriceCommunity2);
            cityList.forEach(function (data){
                cityDate.push(data[0]);
                cityNum.push(data[1])
            });
            districtList.forEach(function (data) {
                districtNum.push(data[1])
                cityNum2.push(data[0])
            });
            var DateList = cityDate.concat(cityNum2,cityNum3);
            DateList.sort();
            var res = [];
            for(var i = 0; i < DateList.length; i++){
                if(DateList[i] !== res[res.length-1]) {
                    res.push(DateList[i])
                }
            }
            res.pop();
            detailChart(res,cityNum,district,districtNum,cityName,trendNetlist1,arr2,community)
        }
    });
    function detailChart(cityDate,cityNum,district,districtNum,cityName,trendNetlist1,trendPriceCommunity2,community) {
        var myChart = echarts.init(document.getElementById('cityPriceLine'));
        option1 = {
            tooltip : {
                trigger: 'axis',
                z:-1,
                axisPointer:{
                    type:'line',
                    lineStyle:{
                        color:["#e1e1e1"]
                    },
                },
                backgroundColor:["#333333"],
                position: function (p) {
                    // 位置回调
                    // console.log && console.log(p);
                    return [p[0] + 38, p[1] + 5];
                },
            },
            // grid : {
            //     width : '950px',
            //     left:'80px',
            // },
            color:['#ee552a',"#00ae66",'#188fef'],
            chart: {
                defaultSeriesType: 'spline', //图表类型为曲线图

            },
            toolbox: {
                show : true,
            },
            calculable : true,
            legend: {
                x:'center',y:'bottom',
                data:[{
                    name:'挂牌量',
                    icon:"bar",
                },{
                    name:community,
                    icon:"line",
                    textStyle:{
                        color:"#ee552a",
                    }
                },{
                    name:district,
                    // icon:"image://../img/mapimg/xian1.png",
                    textStyle:{
                        color:"#00ae66",
                    }
                },{
                    name:cityName,
                    // icon:"image://../img/mapimg/xian2.png",
                    textStyle:{
                        color:"#188fef",
                    }
                }
                ]
            },
            xAxis : [
                {
                    type : 'category',
                    data : cityDate,
                    axisTick: {//刻度条颜色
                        inside:false, //y轴刻度是否朝内
                        lineStyle:{
                            color:'#fff'
                        }
                    },
                    axisLine:{
                        //设置坐标线颜色
                        lineStyle:{
                            color:['#f2f2f2'],
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#000'
                        }
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '均价(元/平方米) ',
                    /* boundaryGap:[0.05,0.05],*/
                    nameGap:30,
                    minInterval: 1,
                    axisLabel : {
                        formatter: '{value}',
                        textStyle:
                            {
                                color:['#000000'],
                            },
                    },
                    axisTick:
                        {
                            lineStyle:{
                                color:['#f2f2f2']
                            },
                        },
                    /* 左边线 */
                    axisLine : {
                        show : true,
                        lineStyle:
                            {
                                color:['#f2f2f2'],
                            }
                    },
                    nameTextStyle:{
                        color:["#000000"]
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                },
                {
                    type : 'value',
                    name : '挂牌量(套数)',
                    nameGap:30,
                    minInterval: 1,
                    splitLine: {
                        lineStyle: {
                            color: ["#f2f2f2"]
                        },
                    },
                    axisLabel : {
                        textStyle:
                            {
                                color:['#000000']
                            },
                    },
                    axisLine : {
                        show :true,
                        lineStyle:
                            {
                                color:['#f2f2f2'],
                            },

                    },
                    nameTextStyle:{
                        color:["#000000"]
                    },
                },
            ],
            series : [

                {
                    name:'挂牌量',
                    type:'bar',
                    yAxisIndex: 1,
                    barWidth : 30,
                    data:trendNetlist1,
                    itemStyle:{
                        normal:{color:'#ededed'},
                        emphasis:{
                            color:'#d4d4d4',
                        }
                    }
                },
                {
                    name:community,
                    type:'line',
                    smooth: true,
                    yAxisIndex: 0,
                    data:trendPriceCommunity2[0],
                },
                {
                    name:district,
                    type:'line',
                    smooth: true,
                    yAxisIndex: 0,
                    data:districtNum,
                    lineStyle:{
                        normal:{
                            width:2,
                            type:"dashed",
                        }
                    }
                },
                {
                    name:cityName,
                    type:'line',
                    smooth: true,
                    yAxisIndex: 0,
                    data:cityNum,
                    lineStyle:{
                        normal:{
                            width:2,
                            type:"dotted",
                        }
                    }
                    //data:streetPrice
                }
            ]
        };
        myChart.setOption(option1);
    }


    var point= $('#coord').val().split(',');
    //周边交通环境与配套
    var communityName = $('#communityName').text();
    var allmapPOI = new BMap.Map("allmapPOI");
    // $('#allmapPOI').css('height',$('#POIList').height());
    allmapPOI.centerAndZoom(new BMap.Point(point[0],point[1]),15);
    allmapPOI.enableScrollWheelZoom();
    // allmapPOI.centerAndZoom(cityName, 15);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    allmapPOI.addControl(top_left_control);
    allmapPOI.addControl(top_left_navigation);
    var local = new BMap.LocalSearch(allmapPOI,{
        renderOptions:{map: allmapPOI, autoViewport:true,panel:"log"},pageCapacity: 6
    });
    local.searchNearby("公交", new BMap.Point(point[0],point[1]));
    $('input').click(function(){
        var inputKW=$(this).val();
        $(this).parent().parent().css('color','#3498DB');
        $(this).parent().parent().siblings().css('color','#6A6C6F');
        local.searchNearby(inputKW, new BMap.Point(point[0],point[1]));
    })

})